export default function circle(){
    var canvas_circle=document.getElementById('heter-circle');
    var circle_w=canvas_circle.clientWidth;
    var circle_h=canvas_circle.clientHeight;
    var ctx_circle=canvas_circle.getContext('2d');
    canvas_circle.width=circle_w;
    canvas_circle.height=circle_h;
    ctx_circle.width=circle_w;
    ctx_circle.height=circle_h;
    ctx_circle.lineWidth=4;
    var circle_deg=0;
    var steep_deg=Math.PI/45;
    var circle_r=Math.min(circle_w,circle_h)/2 - 3;
    var circle_p_x=circle_w/2;
    var circle_p_y=circle_h/2;
    function draw_circle(){
        ctx_circle.save();
        ctx_circle.strokeStyle='rgba(255,215,0,1)';
        ctx_circle.beginPath();
        ctx_circle.arc(circle_p_x,circle_p_y,circle_r,circle_deg,circle_deg+steep_deg);
        ctx_circle.stroke();
        ctx_circle.restore();
        ctx_circle.save();
        ctx_circle.fillStyle='rgba(1,15,75,0.1)';
        ctx_circle.beginPath();
        ctx_circle.arc(circle_p_x,circle_p_y,circle_r+2,0,2*Math.PI);
        ctx_circle.fill();
        ctx_circle.restore();
        circle_deg+=steep_deg;
        if(circle_deg>=2*Math.PI)circle_deg=0;
        requestAnimationFrame(draw_circle);
    }
    draw_circle();
}